<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom学习</title>
    <script type="text/javascript">
        window.onload = function () {
            // // 获取city节点
            // var city = document.getElementById("city");
            // // 获取city节点的所有li子节点
            // var cityLiNode = city.getElementsByTagName("li");
            // alert(cityLiNode.length);
            // 所有的节点都包含有nodeType、nodeName、nodeValue
            // 元素节点
            var elementNode = document.getElementById("bj");
            alert(elementNode.nodeType);  // 元素节点:1
            alert(elementNode.nodeName);  // 节点名：li
            alert(elementNode.nodeValue); // 元素节点没有nodeValue属性值：null

            // 属性节点
            var attributeNode = elementNode.getAttributeNode("name");
            alert(attributeNode.nodeType); //属性节点：2
            alert(attributeNode.nodeName); // 属性节点的节点名：属性名
            alert(attributeNode.nodeValue); // 属性节点的nodeValue属性值 ： 属性值

            // 文本节点
            var textNode = elementNode.firstChild;
            alert(textNode.nodeType); //文本节点：3
            alert(textNode.nodeName); // 文本节点的nodeName：#text
            alert(textNode.nodeValue); // 属性节点的nodeValue ：文本值

        }
    </script>
</head>
<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="sjz" name=""shijiazhuang>石家庄</li>
    </ul>

</body>
</html>